<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03生成小圆点</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        .box{
            width: 730px;
            height: 454px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .circle{
            position: absolute;
            left:50%;
            bottom: 10px;
            margin-left: -50px;
        }
        .circle span{
            width: 18px;
            height: 18px;
            border-radius:50%;
            float: left;
            margin-right: 10px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
        }
        .circle span.current{
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function(){
            var lis = document.getElementById("slider").getElementsByTagName("li");
            var divEle = document.createElement("div");
            divEle.setAttribute("class","circle");
            document.getElementById("box").appendChild(divEle);
            for(var i=1;i<=lis.length;i++){
                var spanEle = document.createElement("span");
                spanEle.innerHTML = i;
                divEle.appendChild(spanEle);
            }
            var childrens = divEle.children;
            childrens[0].setAttribute("class","current");
        }
    </script>
</head>
<body>
<div class="box" id="box">
    <div class="slider" id="slider">
        <ul>
            <li><img src="images/11.jpg" alt="" /></li>
            <li><img src="images/22.jpg" alt="" /></li>
            <li><img src="images/33.jpg" alt="" /></li>
            <li><img src="images/44.jpg" alt="" /></li>
            <li><img src="images/55.jpg" alt="" /></li>
        </ul>
    </div>
</div>
</body>
</html>